<template>
  <div class="XDialog" v-if="visible">
    <article>
      <header>{{ title }}</header>
      <section>
        <slot></slot>
      </section>
      <footer>
        <div class="dangerBtn" v-if="dangerBtnText">
          <el-button type="danger" @click="dangerClick">
            {{ dangerBtnText }}
          </el-button>
          <p v-if="haveSmallBtn" @click="smallBtnClick">免单</p>
        </div>
        <el-button v-if="normalBtnText" type="primary" @click="normalClick">
          {{ normalBtnText }}
        </el-button>
        <el-button v-if="infoBtnText" type="info" @click="infoClick">
          {{ infoBtnText }}
        </el-button>
      </footer>
    </article>
  </div>
</template>

<script>
export default {
  name: "XDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "提示",
    },
    dangerBtnText: {
      type: String,
      default: "",
    },
    normalBtnText: {
      type: String,
      default: "",
    },
    infoBtnText: {
      type: String,
      default: "",
    },
    haveSmallBtn: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  created() {},
  activated() {},
  computed: {},
  methods: {
    infoClick() {
      this.$emit("cancel");
    },
    dangerClick() {
      this.$emit("confirm");
    },
    normalClick() {
      this.$emit("confirm", "normal");
    },
    smallBtnClick() {
      this.$emit("freeOrder");
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
